<template>
  <div class="my">
    <div class="header">
      <div class="myheader">
        <div class="left">
          <h3>{{ $store.state.userInfo.nickname }}</h3>
          <p>{{ $store.state.userInfo.intro }}</p>
        </div>
        <div class="right">
          <img
            :src="$store.state.userInfo.avatar"
            alt=""
            @click="goEditInfo()"
          />
        </div>
      </div>
      <div class="conment1">
        <van-grid>
          <van-grid-item text="累计答题">
            <template #icon>
              <h4>{{ $store.state.userInfo.submitNum }}</h4>
            </template> </van-grid-item
          ><van-grid-item text="收藏题目">
            <template #icon>
              <h4>
                {{ $store.state.userInfo.collectQuestions.length }}
              </h4>
            </template> </van-grid-item
          ><van-grid-item text="我的错题">
            <template #icon>
              <h4>{{ $store.state.userInfo.errorNum }}</h4>
            </template> </van-grid-item
          ><van-grid-item text="正确率">
            <template #icon>
              <h4>
                {{
                  $store.state.userInfo.submitNum === undefined || null
                    ? 0
                    : Math.ceil(
                        (($store.state.userInfo.submitNum -
                          $store.state.userInfo.errorNum) /
                          $store.state.userInfo.submitNum) *
                          100
                      )
                }}%
              </h4>
            </template>
          </van-grid-item>
        </van-grid>
        <van-cell-group>
          <van-cell
            :value="$store.state.userInfo.position"
            is-link
            @click="editJob('修改职位')"
          >
            <template #title>
              <i class="iconfont iconicon_mine_gangwei"></i>
              <span>我的岗位</span>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
    <div class="centers">
      <div class="tops">
        <h4>面经数据</h4>
        <div class="mianjing">
          <van-grid direction="horizontal" :column-num="3">
            <van-grid-item>
              <template #text>
                <div class="fontSize">
                  昨日阅读<span>{{
                    $store.state.userInfo.shareData.read.yesterday
                  }}</span>
                </div>
              </template>
            </van-grid-item>
            <van-grid-item>
              <template #text
                ><div class="fontSize">
                  昨日获赞<span
                    >+{{ $store.state.userInfo.shareData.star.yesterday }}</span
                  >
                </div>
              </template>
            </van-grid-item>
            <van-grid-item>
              <template #text
                ><div class="fontSize">
                  昨日新增<span
                    >+{{
                      $store.state.userInfo.shareData.comment.yesterday
                    }}</span
                  >
                </div>
              </template>
            </van-grid-item>
          </van-grid>
        </div>
        <!-- 居中 -->
        <van-grid :column-num="3">
          <van-grid-item text="阅读总数">
            <template #icon>
              <h4 class="h4">
                {{ $store.state.userInfo.shareData.read.total }}
              </h4>
            </template>
          </van-grid-item>
          <van-grid-item text="获赞总数">
            <template #icon>
              <h4 class="h4">
                {{ $store.state.userInfo.shareData.star.total }}
              </h4>
            </template>
          </van-grid-item>
          <van-grid-item text="评论总数">
            <template #icon>
              <h4 class="h4">
                {{ $store.state.userInfo.shareData.comment.total }}
              </h4>
            </template>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="footer">
        <div>
          <div class="names">
            <van-cell-group>
              <van-cell value="21" is-link @click="$router.push('/myExp')">
                <template #title>
                  <i class="iconfont iconicon_mine_mianjing"></i>
                  <span>我的面试经验分享</span>
                </template>
              </van-cell>
            </van-cell-group>
          </div>
          <div class="names">
            <van-cell-group>
              <van-cell
                :value="$store.state.userInfo.systemMessages"
                is-link
                @click="mymessage"
              >
                <template #title>
                  <i class=" iconfont iconicon_mine_xiaoxi"></i>
                  <span>我的消息</span>
                </template>
              </van-cell>
            </van-cell-group>
          </div>
          <div class="names">
            <van-cell-group>
              <van-cell value="？" is-link>
                <template #title>
                  <i class="iconfont iconicon_mine_tikushoucang"></i>
                  <span>收藏的题库</span>
                </template>
              </van-cell>
            </van-cell-group>
          </div>
          <div>
            <van-cell-group>
              <van-cell value="？" is-link>
                <template #title>
                  <i class="iconfont iconicon_mine_qiyeshoucang"></i>
                  <span>收藏的企业</span>
                </template>
              </van-cell>
            </van-cell-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { info } from '@/api/api'

export default {
  data () {
    return {
      // userData: {
      //   shareData: {
      //     read: {
      //       yesterday: '',
      //       total: ''
      //     },
      //     comment: {
      //       yesterday: '',
      //       total: ''
      //     },
      //     star: {
      //       yesterday: '',
      //       total: ''
      //     }
      //   },
      //   collectQuestions: []
      // }
    }
  },
  methods: {
    goEditInfo (data) {
      this.$router.push('/editInfo')
    },
    // 点击编辑岗位
    editJob (value) {
      this.$router.push(`/editdata/${value}`)
    },
    // 点击我的消息
    mymessage () {
      this.$router.push('/message')
    }
    // // 获取用户信息
    // async getInfo () {
    //   const res = await info()
    //   // console.log('用户信息', res.data)
    //   // console.log(this.userData)
    //   this.$store.state.userInfo = res.data
    //   this.userData = this.$store.state.userInfo
    // }
  }
  // created () {
  //   // this.getInfo()
  //   console.log('ddd')
  // }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.my {
  width: 100%;
  // height: 100%;
  .header {
    width: 100%;
    height: 212px;
    background-color: #cb0030;
    padding-top: 37px;
    .myheader {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        padding-left: 15px;
        color: #fff;
        height: 52px;
        h3 {
          font-size: 22px;
          text-align: left;
        }
        p {
          font-size: 12px;
          margin-top: 12px;
          color: #e499ab;
        }
      }
      .right {
        height: 50px;
        padding-right: 32px;
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: 3px solid #d6637e;
        }
      }
    }
    .conment1 {
      /deep/ .iconfont {
        font-size: 22px;
        margin-right: 12px;
        color: #000;
        vertical-align: middle;
      }
      // [data-v-7a3d5949] {
      //   font-size: 14px;
      // }
      .van-grid-item {
        margin-top: 5px;
        /deep/.van-grid-item__content {
          font-size: 25px;
          background-color: #c7002f;
          color: #fff;
          .van-grid-item__text {
            margin-top: 5px;
            color: #e499ab;
          }
        }
      }
    }
    /deep/ [class*='van-hairline']::after {
      border: none;
    }
    .van-cell-group {
      width: 92%;
      margin-left: 15px;
      height: 55px;
      padding: 17px;
      border-radius: 10px;
      border-bottom: 1px solid #ccc;
    }
  }
  .centers {
    width: 100%;
    height: 100%;
    background-color: #f7f4f5;
    padding: 26px 0;
    .tops {
      height: 143px;
      width: 92%;
      margin-left: 15px;
      background-color: #fff;
      border-radius: 6px;
      padding: 10px 25px;
      /deep/ [class*='van-hairline']::after {
        border: none;
      }
      /deep/ .van-grid-item__content {
        padding: 10px;
      }
      *[data-v-7a3d5949] {
        font-size: 12px;
      }
      .mianjing {
        /deep/ .van-grid-item__content {
          padding: 0px;
          padding-top: 18px;
        }
      }
      .fontSize {
        color: #ccc;
        span {
          color: #78c4db;
        }
      }
      .h4 {
        font-size: 25px;
      }
      /deep/ .van-grid-item__text {
        color: #888a9c;
        font-size: 12px;
        margin-top: 5px;
      }
    }
    .footer {
      width: 92%;
      height: 100%;
      background-color: #fff;
      // height: 322px;
      border-radius: 10px;
      padding: 16px;
      margin: 10px 0 6px 15px;
      /deep/ .iconfont {
        font-size: 22px;
        margin-right: 12px;
        color: #000;
        vertical-align: middle;
      }
      // [data-v-7a3d5949] {
      //   font-size: 15px;
      // }
      [class*='van-hairline']::after {
        border: none;
      }
      .names {
        margin-bottom: 22px;
      }
    }
  }
}
</style>
